<template>
	<!-- 忘记密码 -->
	<view class="forget">
		<view class="login-bg"></view>			
		<u-form :model="form" class="login-form" label-width="150" :label-style="{textAlign: 'justify', textAlignLast: 'justify', display: 'inline-block', paddingRight:'10px'}" ref="uForm">
			
			<u-form-item label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" name="mobile" />
			</u-form-item>
			<u-form-item label="验证码" prop="code">
				<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button class="sendcodebtn" slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			
			<u-form-item label="密　码" prop="password">
				<u-input v-model="form.password" :password-icon="true" placeholder="请输入您要修改的密码" type="password" name="password" />
			</u-form-item>
			<u-form-item label="确认密码" prop="second_password">
				<u-input v-model="form.second_password" :password-icon="true" placeholder="请再次确认密码" type="password" name="second_password" />
			</u-form-item>
			
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</u-form>
		
		<view class="confirmation" >
			<view class="confirm_btn" @tap="submitfun">确认提交</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form: {
					mobile: '',
					password: '',
					second_password:'',
					code: '',
				},
				rules: {
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					second_password:[
						{
							required: true,
							min: 6, 
							message: '请输入正确的确定密码', 
							trigger: 'blur'
						}
					],
					password: [
						{
							required: true,
							min: 6, 
							message: '请输入正确的密码', 
							trigger: 'blur'
						}
					],
					code: [
						{
							required: true,
							min: 4,
							message: '请输入正确的验证码',
							trigger: ['change', 'blur']
						}
					]
				},
				codeTips: '请输入验证码',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			getCode () {
				var that = this
				if (!that.form.mobile) {
					that.$u.toast('请输入手机号');
					return ;
				}
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					that.$u.post('/api/sms/send', {
						event: 'forget_password',
						mobile: that.form.mobile
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							that.$u.toast('验证码已发送');
							that.$refs.uCode.start();
						} else {
							that.modelContent = res.msg
							that.modelShow = true
						}
					}).catch(res => {
						that.$u.toast('请求失败，请重试！');
					})
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			submitfun(){
				if(this.form.password!=this.form.second_password){
					this.$api.msg("两次输入密码不一致！")
					return false;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/addons/fastim/api.user/forgetPassword', {
							account:this.form.mobile,
							code:this.form.code,
							first_password:this.form.password,
							second_password:this.form.second_password,
						}).then(res => {
							if (res.code == 1) {
								uni.hideLoading();
								this.$u.toast(res.msg);
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							} else {
								this.$u.toast(res.msg);
							}
						}).catch(err => {
							console.info("err",err);
							this.$u.toast('请求失败，请重试！');
						})
						
						
					}else{
						
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: $--bg-color;
}
.login-bg {
	height: 200rpx;
	width: 100vw;
}
.login-form {
	display: block;
	width: 78vw;
	margin: 0 auto;
}
.confirmation{
	width: 100%;
	padding: 30rpx 40rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	
	.confirm_btn{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 60rpx;
		background-color: $themecolor;
	}
}
</style>